<template>
	<view class="containerbox bgc-white">
		<uv-navbar :title="detail.course?.name" auto-back placeholder />
		<scroll-view class="containerbox" scrollY>
			<c_ranklist :examId="detail.id" isGop :courseId="_courseId" @handle="rankId = $event"/>
		</scroll-view>
		<view class="flex items-center justify-between bottombox">
			<view class="btn bgc-primary" @click="begin">确认选择</view>
		</view>
	</view>
</template>

<script setup>
import { getArticleList_api, getExerDetail_api } from '@/common/apis/course'
import { onShow, onLoad } from "@dcloudio/uni-app"
import { ref } from 'vue'
import c_ranklist from './components/ranklist.vue'

const detail = ref({})
const _courseId = ref()
const rankId = ref()
const ExerId = ref()
const userId = ref(0);
onLoad(async options => {
	_courseId.value = options.courseId;
	ExerId.value = options.itemId;
	userId.value = options.userId || 0;
}) 
onShow(async () => {
	detail.value = await getExerDetail_api({id: ExerId.value})
})

function begin(){
	if(!rankId.value){
		uni.showToast({
			title: '请选择关卡',
			icon: 'none'
		})
		return false
	}
	uni.$fui.href(`/pages/course/reading/info?rankId=${rankId.value}&examId=${detail.value.id}&userId=${userId.value}`)
}
</script>

<style lang="scss" scoped>
.bottombox{padding: 20rpx 32rpx;}
.btn{height: 80rpx; border-radius: 12rpx; flex: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 28rpx;}
</style>